<!--

  Vant的搜索框

  // 带*号表示必填属性
  props:
    label:(String)                   搜索框左侧文本
    shape:(String)                   搜索框形状，可选值为round
    background:(String)              搜索框外部背景色
    maxlength:(String || Number)     输入的最大字符数
    placeholder:(String)             占位提示文字
    clearable:(Boolean)              是否启用清除图标，点击清除图标后会清空输入框
    clear-trigger:(String)           显示清除图标的时机，always 表示输入框不为空时展示，
    focus:(String)                   表示输入框聚焦且不为空时展示
    autofocus:(Boolean)              是否自动聚焦，iOS 系统不支持该属性
    show-action:(Boolean)            是否在搜索框右侧显示取消按钮
    action-text:(Boolean)            取消按钮文字
    disabled:(Boolean)               是否禁用输入框
    readonly:(Boolean)               是否将输入框设为只读
    error:(Boolean)                  是否将输入内容标红
    input-align:(String)             输入框内容对齐方式，可选值为 center right
    left-icon:(String)               输入框左侧图标名称或图片链接
    right-icon:(String)              输入框右侧图标名称或图片链接

  slot:
    left                   自定义左侧内容（搜索框外）
    action                 自定义右侧内容（搜索框外），设置show-action属性后展示
    label                  自定义左侧文本（搜索框内）
    left-icon              自定义左侧图标（搜索框内）
    right-icon             自定义右侧图标（搜索框内）

  event:
    search               确定搜索时触发	          value: string (当前输入的值)
    input                输入框内容变化时触发	    value: string (当前输入的值)
    focus	               输入框获得焦点时触发	    event: Event
    blur                 输入框失去焦点时触发	    event: Event
    clear	               点击清除按钮后触发	      event: Event
    cancel               点击取消按钮时触发	      -

  demo:
    <qm-search
      placeholder="搜索词"
      v-model="searchKey"
      @search="onSearch"
      shape="round"
      clear-trigger="always"
      show-action
    >
      <template #action>
        <div @click="onSearch" style="width: 3em; text-align: center">搜索</div>
      </template>
    </qm-search>

    data(){
      return {
        searchKey: ""
      }
    },
    methods: {
      onSearch(e){
        ...
      }
    }

    更多帮助请产看Vant官网： https://vant-contrib.gitee.io/vant/v2/#/zh-CN/search

-->



<template>
  <div class="qm-search">
    <van-search v-bind="$attrs" v-on="$listeners">
      <template v-for="(index, name) in $slots" :slot="name">
        <slot :name="name" />
      </template>
    </van-search>
  </div>
</template>

<script>
import { Search } from "vant";
export default {
  components: {
    [Search.name]: Search,
  },
  inheritAttrs: true,
};
</script>

<style lang="less" scoped>
/deep/ .van-search__content {
  background-color: #f5f7fa;
  .van-field__control::placeholder {
    color: var(--color-text-weak);
  }
}
</style>
